<template>
	<!-- 左右收缩组件 -->
	<div class="card-item" :style="style">
		<div class="card-title">
			<i :class="titleIcon"></i>
			<span> {{title}} </span>
		</div>
		<div class="card-center">
			<!-- options参数参考ICountUp.options -->
			<ICountUp :delay="delay" :endVal="endVal" :options="options"></ICountUp>
		</div>
		<div class="card-footer">
			{{describe}}
		</div>
	</div>
</template>

<script>
	import ICountUp from 'vue-countup-v2';
	import {mapGetters} from 'vuex'
	export default {
		computed:{
			...mapGetters(['size'])
		},
		components: {
			ICountUp
		},
		name: 'lzCard',
		props: {
			style: {//卡片样式
				type: Object,
				default: ()=>{
					return {
						background: 'linear-gradient(to right, #5171fd, #c97afd)',
						boxShadow: '0 5px 10px #c97afd',//是否使用分组，分组后每三位会用一个符号分隔
					}
				}
			},
			title: {//标题
				type: String,
				default: ''
			},
			titleIcon: {//头部图标
				type: String,
				default: ''
			},
			describe:{//描述文字
				type: String,
				default: ''
			},
			delay:{//起始变化值
				type: Number,
				default: 0
			},
			endVal:{//最终变化值
				type: Number,
				default: 0
			},
			options:{//数字动画的其他配置
				type: Object,
				default: ()=>{
					return {
						useEasing: true,//简化动画（true）
						useGrouping: true,//是否使用分组，分组后每三位会用一个符号分隔
						separator: ',',//分组分隔符（'，'）
						decimal: '.',
						decimalPlaces: 0,//保留几位小数
						prefix: '',//前缀
						suffix: ''//后缀
					}
				}
			},
		},
		data() {
			return {
			}
		},
		mounted() {},
		methods: {}
	}
</script>

<style scoped lang="scss">
	//卡片
	.card-item {
		background: linear-gradient(to right, #5171fd, #c97afd);
		box-shadow: 0 5px 10px #c97afd;
		color: #fff;
		box-sizing: border-box;
		height: 150px;
		padding: 15px 15px 0;
		border-radius: 6px;
		cursor: pointer;
		margin-bottom: 25px;
		.card-title {
			font-size: 1rem;
		}
		.card-center {
			font-size: 1.9rem;
			font-weight: bold;
			margin-top: 12px;
			padding-left: 25px;
		}
		.card-footer{
			font-size: 0.85rem; height: 46px;margin-top: 8px;
		}
	}
	.card-item:hover{
		transform: scale(1.05);
	}
</style>

